<template>
    <div class="dashboard-container">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                        <div class="stat-icon" style="background-color: #409EFF;">
                            <i class="el-icon-user"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-title">用户总数</div>
                            <div class="stat-value">1,234</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                        <div class="stat-icon" style="background-color: #67C23A;">
                            <i class="el-icon-notebook-2"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-title">图书总数</div>
                            <div class="stat-value">5,678</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                        <div class="stat-icon" style="background-color: #E6A23C;">
                            <i class="el-icon-reading"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-title">借阅中</div>
                            <div class="stat-value">789</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                        <div class="stat-icon" style="background-color: #F56C6C;">
                            <i class="el-icon-warning-outline"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-title">逾期未还</div>
                            <div class="stat-value">56</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-20">
            <el-col :span="16">
                <el-card shadow="hover" class="chart-card">
                    <div slot="header" class="card-header">
                        <span>借阅趋势</span>
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px;">
                        </el-date-picker>
                    </div>
                    <div id="borrowChart" style="height: 300px;"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" class="chart-card">
                    <div slot="header" class="card-header">
                        <span>图书分类统计</span>
                    </div>
                    <div id="categoryChart" style="height: 300px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-20">
            <el-col :span="24">
                <el-card shadow="hover">
                    <div slot="header" class="card-header">
                        <span>最近借阅记录</span>
                        <el-button type="primary" size="small">查看更多</el-button>
                    </div>
                    <el-table :data="borrowRecords" style="width: 100%">
                        <el-table-column prop="bookName" label="图书名称"></el-table-column>
                        <el-table-column prop="userName" label="借阅人"></el-table-column>
                        <el-table-column prop="borrowDate" label="借阅日期"></el-table-column>
                        <el-table-column prop="returnDate" label="应还日期"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <el-tag
                                    :type="scope.row.status === '已归还' ? 'success' : scope.row.status === '逾期' ? 'danger' : 'primary'">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "DashboardView",
    data() {
        return {
            dateRange: '',
            borrowRecords: [
                {
                    bookName: 'Vue.js设计与实现',
                    userName: '张三',
                    borrowDate: '2023-05-10',
                    returnDate: '2023-06-10',
                    status: '借阅中'
                },
                {
                    bookName: 'JavaScript高级程序设计',
                    userName: '李四',
                    borrowDate: '2023-05-05',
                    returnDate: '2023-06-05',
                    status: '已归还'
                },
                {
                    bookName: '深入浅出Node.js',
                    userName: '王五',
                    borrowDate: '2023-04-20',
                    returnDate: '2023-05-20',
                    status: '逾期'
                },
                {
                    bookName: 'CSS世界',
                    userName: '赵六',
                    borrowDate: '2023-05-15',
                    returnDate: '2023-06-15',
                    status: '借阅中'
                },
                {
                    bookName: '算法导论',
                    userName: '钱七',
                    borrowDate: '2023-05-01',
                    returnDate: '2023-06-01',
                    status: '已归还'
                }
            ]
        };
    },
    mounted() {
        this.initCharts();
    },
    methods: {
        initCharts() {
            // 借阅趋势图
            const borrowChart = echarts.init(document.getElementById('borrowChart'));
            borrowChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['借阅量', '归还量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '借阅量',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210],
                        smooth: true,
                        itemStyle: {
                            color: '#409EFF'
                        }
                    },
                    {
                        name: '归还量',
                        type: 'line',
                        data: [110, 120, 90, 120, 80, 210, 190],
                        smooth: true,
                        itemStyle: {
                            color: '#67C23A'
                        }
                    }
                ]
            });

            // 图书分类图
            const categoryChart = echarts.init(document.getElementById('categoryChart'));
            categoryChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center'
                },
                series: [
                    {
                        name: '图书分类',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '计算机' },
                            { value: 735, name: '文学' },
                            { value: 580, name: '历史' },
                            { value: 484, name: '经济' },
                            { value: 300, name: '科学' }
                        ],
                        color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
                    }
                ]
            });

            // 响应式调整
            window.addEventListener('resize', function () {
                borrowChart.resize();
                categoryChart.resize();
            });
        }
    }
};
</script>

<style lang="less" scoped>
.dashboard-container {
    padding: 20px;

    .mt-20 {
        margin-top: 20px;
    }

    .stat-card {
        margin-bottom: 20px;

        .stat-item {
            display: flex;
            align-items: center;

            .stat-icon {
                width: 50px;
                height: 50px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 24px;
                margin-right: 15px;
            }

            .stat-info {
                flex: 1;

                .stat-title {
                    font-size: 14px;
                    color: #909399;
                    margin-bottom: 5px;
                }

                .stat-value {
                    font-size: 22px;
                    font-weight: bold;
                    color: #303133;
                }
            }
        }
    }

    .chart-card {
        margin-bottom: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>